<template>
  <div class="dict-dbclick-area" style="width: 100%">
    <el-input
      readonly
      @dblclick.native="openDialog"
      ref="target"
      class="d2p-dict-select"
      :value="text"
      v-bind="_elProps"
      :value-key="dict.value"
      :disabled="disabled"
      @input="onInput"
      @change="doChange"
      v-on="extraEvents"
      style="width:100%"
    >
      <el-option
        v-for="option in _options"
        :key="option[dict.value]"
        :value="option[dict.value]"
        :label="option[dict.label]"
        v-bind="option"
      >
      </el-option>
    </el-input>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="500px"
      class="dict-dbclick-area__dialog"
      :before-close="handleClose">
      <div class="flex" style="margin-bottom: 20px">
        <div class="flex" style="margin-right: 2em">
          <div style="width: 3em">代码</div>
          <el-input v-model="tempDistrictCode"/>
        </div>
        <div class="flex" style="margin-right: 1em">
          <div style="width: 3em">名称</div>
          <el-input v-model="tempDistrictName"/>
        </div>
        <el-button @click="handleQuery" type="primary">查询</el-button>
      </div>
      <el-menu
        @select="handleSelect"
        :default-active="tempValue"
        style="min-height: 200px">
        <el-menu-item :key="item[dict.value]" :index="item[dict.value]" v-for="item in pageData">{{
            item[dict.label]
          }}--{{ item[dict.value] }}
        </el-menu-item>
      </el-menu>
      <el-pagination
        layout="prev, pager, next"
        :current-page.sync="pagination.currentPage" :total="pagination.total">
      </el-pagination>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
import { options } from '@/business/install'
import input from 'd2-crud-plus/src/lib/mixins/input'
import utils from 'd2-crud-plus/src/lib/utils'

utils.dict.getRemoteDictFunc = options.getRemoteDictFunc
import inputDict from 'd2-crud-plus/src/lib/mixins/input-dict'
import inputEvents from 'd2-crud-plus/src/lib/mixins/input-events'
// 字典选择器
export default {
  data () {
    return {
      tempDistrictName: '',
      tempDistrictCode: '',
      districtName: '',
      districtCode: '',
      pagination:{
        total:0,
        pageSize: 10,
        currentPage: 1
      },
      tempValue: null,
      dialogVisible: false
    }
  },
  name: 'dict-select',
  mixins: [input, inputEvents, inputDict],
  props: {
    // 值
    value: {
      type: [Number, String, Boolean, Array],
      require: false
    },
    // value的分隔符<br/>
    // 多选时，如果value为string，则以该分隔符分割成多个展示<br/>
    // 传入空字符串，表示不分割<br/>
    separator: {
      default: ',',
      require: false
    },
    // 等效于 elProps.placeholder
    placeholder: { require: false },
    // 等效于 elProps.filterable
    filterable: {
      default: false,
      require: false
    },
    // 等效于 elProps.clearable
    clearable: {
      default: false,
      require: false
    },
    // 等效于 elProps.multiple
    multiple: {
      default: false,
      require: false
    },
    // el-select的配置，[el-select](https://element.eleme.cn/#/zh-CN/component/select#select-attributes)
    elProps: {
      type: Object,
      require: false
    },
    // 数据字典配置
    // {url:'xxx',data:[],value:'',label:'',children:''}
    dict: {
      type: Object,
      require: false,
      default: () => {
        return { data: undefined }
      }
    },
    // 选项列表，优先级比dict高
    options: {
      type: Array,
      require: false
    },
    // 选项数据ready
    onReady: {
      type: Function,
      require: false
    }
  },
  computed: {
    text () {
      for (const item of this._options) {
        if (item[this.dict.value] === this.value) {
          return item[this.dict.label]
        }
      }
      return ''
    },
    pageData(){
      let list = this._options


      if(this.districtCode){
        list = list.filter(item=> item.districtCode.includes(this.districtCode))
      }

      if(this.districtName){
        list = list.filter(item=> item.districtName.includes(this.districtName))
      }


      let current = this.pagination.currentPage
      let total = list.length

      let pageSize = this.pagination.pageSize
      let pages = total / pageSize
      if(total % pageSize !== 0){
        pages += 1
      }
      if(current === 0 || current>pages){
        return []
      }
      let start = (current-1) * pageSize
      let end = current * pageSize
      this.pagination.total = total
      return list.slice(start, end)
    },
    _elProps () {
      return {
        placeholder: this.placeholder,
        filterable: this.filterable,
        clearable: this.clearable,
        multiple: this.multiple,
        ...this.elProps
      }
    }
  },
  created () {
    console.log('this.', this)
    this.initExtraEvents()
  },
  methods: {
    handleQuery(){
      this.districtCode = this.tempDistrictCode
      this.districtName = this.tempDistrictName
    },
    handleClose(done){
      this.tempValue = this.value
      done()
    },
    handleSelect (e) {
      this.tempValue = e
    },
    handleConfirm () {
      if (this.value || this.tempValue) {

        if (this.tempValue !== this.value) {
          this.$emit('input', this.tempValue)
          // this.$emit("change", this.tempValue)
        }
      }
      this.dialogVisible = false
    },
    openDialog () {
      this.dialogVisible = true
    },
    doBlur (e) {
      this.$emit('blur', e)
    },
    test (t) {
      console.log('test', t)
    },
    doChange (value) {
      // log.debug('changed', value)
    },
    setValue (newVal) {
      if (!this._elProps.multiple) {
        // 单选
        if (newVal === this.currentValue) {
          return
        }
        this.currentValue = newVal
        return
      }
      // 多选
      if (newVal == null) {
        this.currentValue = []
        return
      }
      if (typeof newVal === 'string' && this.separator != null && this.separator !== '') {
        this.currentValue = newVal.split(this.separator)
        return
      }
      if (!(newVal instanceof Array)) {
        this.currentValue = [newVal]
        return
      }

      //  TODO 重置表单时，多选的value会重置为[null]
      const val = []
      for (const item of newVal) {
        if (item != null) {
          val.push(item)
        }
      }
      this.currentValue = val
      if (newVal.length === 1 && newVal[0] == null) {
        this.onInput(val)
      }
    }
  }
}
</script>

<style lang="scss">
.dict-dbclick-area__dialog{
  .el-input__inner {
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
    border-left: 1px #C0C4CC solid !important;
  }

  .el-input__inner:focus {
    border-left: 1px #409eff solid !important;
  }

  .el-pagination{
    text-align: right;
  }
}

</style>
